<template>
	<view class="container">
		<view class="header-box">
			<view class="header-Head">
				<view class="img-box">
					<img style="width: 40vw;" mode='widthFix' :src="baseURL+'/static/center/jkda-rx.png'" alt="">
					<view v-for="(item,index) in dataRecord.minorDiagnoseList" :key='item' class="f-box" :style="
						[...positionArr[index]]">{{item}}</view>
				</view>
				<view class="info-box">
					<view class="info-content">
						<text style="color: #666666; font-size: 14px;">姓名</text>
						<text style=" font-size: 16px;">{{dataRecord.customerName?dataRecord.customerName:'暂无'}}</text>
					</view>
					<view class="info-content">
						<text style="color: #666666; font-size: 14px;">性别</text>
						<text style=" font-size: 16px;">{{dataRecord.gender=='1'? '男':'女'  }}</text>
					</view>
					<view class="info-content">
						<text style="color: #666666; font-size: 14px;">年龄</text>
						<text style=" font-size: 16px;">{{dataRecord.customerAge?dataRecord.customerAge:'暂无' }}</text>
					</view>
					<view class="info-content">
						<text style="color: #666666; font-size: 14px;">电话</text>
						<text
							style=" font-size: 16px;">{{dataRecord.customerPhone?dataRecord.customerPhone:'暂无' }}</text>
					</view>
					<view class="info-content">
						<text style="color: #666666; font-size: 14px;">分院</text>
						<text style=" font-size: 16px;">{{dataRecord.storeName?dataRecord.storeName:'暂无' }}</text>
					</view>
					<view class="info-content">
						<text style="color: #666666; font-size: 14px;">日期</text>
						<text style=" font-size: 16px;">{{dataRecord.createTime?dataRecord.createTime:'暂无'}}</text>
					</view>
				</view>
			</view>

		</view>
		<view v-if='dataRecord.diagnoseResult'>
			<view style="padding:80px 20px 20px 20px;">
				<view style="padding: 10px;background-color: #fff;border-radius: 10px;">
					<view style="font-size: 20px;padding:15px;padding-bottom: 0;font-weight: 600;">检测结果</view>
					<view class="slider-box">
						<view class="slider-header">
							<view>蜡状物/头屑</view>
							<view>{{typeClassText(dataRecord.diagnoseResult.scurf)}}</view>
						</view>
						<view class="slider-footer">
							<view :style="{width: dataRecord.diagnoseResult.scurf+'%',height:' 5px'}"
								:class="[typeClass(dataRecord.diagnoseResult.scurf)]">
							</view>
						</view>
					</view>
					<view class="slider-box">
						<view class="slider-header">
							<view>敏感/炎症</view>
							<view>{{typeClassText(dataRecord.diagnoseResult.inflammation)}}</view>
						</view>
						<view class="slider-footer">
							<view :style="{width: dataRecord.diagnoseResult.inflammation+'%',height:' 5px'}"
								:class="[typeClass(dataRecord.diagnoseResult.inflammation)]">
							</view>
						</view>
					</view>
					<view class="slider-box">
						<view class="slider-header">
							<view>脱发等级</view>
							<view>{{typeClassText(dataRecord.diagnoseResult.alopeciaLevel)}}</view>
						</view>
						<view class="slider-footer">
							<view :style="{width: dataRecord.diagnoseResult.alopeciaLevel+'%',height:' 5px'}"
								:class="[typeClass(dataRecord.diagnoseResult.alopeciaLevel)]">
							</view>
						</view>
					</view>
					<view class="slider-box">
						<view class="slider-header">
							<view>头皮油脂</view>
							<view>{{typeClassText(dataRecord.diagnoseResult.grease)}}</view>
						</view>
						<view class="slider-footer">
							<view :style="{width: dataRecord.diagnoseResult.grease+'%',height:' 5px'}"
								:class="[typeClass(dataRecord.diagnoseResult.grease)]">
							</view>
						</view>
					</view>
					<view class="slider-box">
						<view class="slider-header">
							<view>脱发程度 </view>
							<view>{{typeClassText(dataRecord.diagnoseResult.alopeciaDegree)}}</view>
						</view>
						<view class="slider-footer">
							<view :style="{width: dataRecord.diagnoseResult.alopeciaDegree+'%',height:' 5px'}"
								:class="[typeClass(dataRecord.diagnoseResult.alopeciaDegree)]">
							</view>
						</view>
					</view>
					<view class="slider-box">
						<view class="slider-header">
							<view>毳毛占比 </view>
							<view>{{typeClassText(dataRecord.diagnoseResult.softFur)}}</view>
						</view>
						<view class="slider-footer">
							<view :style="{width: dataRecord.diagnoseResult.softFur+'%',height:' 5px'}"
								:class="[typeClass(dataRecord.diagnoseResult.softFur)]">
							</view>
						</view>
					</view>
				</view>
				<view
					style="background-color: #fff;border-radius: 10px 10px 0 0;margin-top: 20px;overflow: hidden;margin-bottom: 80px;">
					<view class="scheme-box">
						<view class="scheme-item">
							<view @click="tabClick(0)" :class="[active==0?'active':'']">病症诊断</view>
							<view @click="tabClick(1)" :class="[active==1?'active':'']">治疗方案</view>
						</view>
					</view>
					<view v-if='active===0' class="scheme-detail">
						<view v-for='(item,index) in dataRecord.mainDiagnoseList' :key='index'>
							<view class="title-detail">{{item.diagnosticName}}</view>
							<view class="p-detail">{{item.diagnosticInstruction}}</view>
						</view>
					</view>
					<view v-else class="scheme-detail">
						<view v-for='(item,index) in dataRecord.mainDiagnoseList' :key='index'>
							<view class="y-detail">{{item.treatmentScheme}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view v-else>
			<view style="display: flex;justify-content: center;margin-top: 30px;">
				<img :src="baseURL+'/static/center/icon-zwjcsj.png'" alt="">
			</view>
			<view style="text-align: center;color: #CFD2E7;font-size: 20px;">暂无检测数据</view>
		</view>
	</view>
</template>


<script>
	import {
		healthRecord,
	} from '@/api/axios/center.js'
	export default {
		data() {
			return {
				active: 0,
				dataRecord: {},
				baseURL: this.staticURL,
				positionArr: [{
						'left': '0vw',
						'top': '15%',
						'transform': 'translate(-80% , 0)'
					},
					{
						'right': '0vw',
						'top': '15%',
						'transform': 'translate(80% , 0)'
					},
					{
						'left': '0vw',
						'top': '35%',
						'transform': 'translate(-90% , 0)'
					},
					{
						'right': '0vw',
						'top': '35%',
						'transform': 'translate(90% , 0)'
					},
					{
						'left': '0vw',
						'top': '55%',
						'transform': 'translate(-80% , 0)'
					},
					{
						'right': '0vw',
						'top': '55%',
						'transform': 'translate(80% , 0)'
					}
				],
				flag: true

			};
		},
		methods: {
			typeClass(num) {
				if (num > 80) {
					return 'one'
				} else if (num > 60) {
					return 'two'
				} else if (num < 60) {
					return 'three'
				} else {
					return 'one'
				}
			},
			typeClassText(num) {
				if (num > 80) {
					return '重度'
				} else if (num > 60) {
					return '中度'
				} else if (num < 60) {
					return '轻度'
				} else {
					return '重度'
				}
			},
			tabClick(num) {
				this.active = num
			}
		},
		created() {},
		mounted() {},
		onLoad(data) {
			let customerId = uni.getStorageSync('customerId')
			healthRecord({
				params: {
					customerId: customerId
				}
			}).then(res => {
				res.minorDiagnoseList = res.minorDiagnoseList
				this.dataRecord = res
				this.dataRecord.createTime = this.dataRecord.createTime.substring(0, 10)
			})
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>